<template>
	<view class="root-page cart-page">
		<!-- 购物车列表 -->
		<view class="carts">
			<checkbox-group @change="onchangeone">
				<view class="card" v-for="v,k in carts">
					<label>
						<checkbox :value="v.carId" :checked="one.includes(v.carId)" /><text></text>
					</label>
					<image :src="v.productImg"></image>
					<view class="length">
						<p v-text="v.productName" class="name"></p>
						<view class="length1">
							<text v-text="v.productPrice"></text>
							<text @click="cancel(v.carId)">删除</text>
							<view class="btn">
								<van-stepper v-model="v.carCount" min="1" max="50" @minus="updateNum(2,v.carId)"
									@plus="updateNum(1,v.carId)" />
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<!-- 工具栏 -->
		<view class="tool">
			<checkbox-group @change="onchangeall" class="all">
				<label>
					<checkbox value="all" :checked="all" /><text>全选</text>
				</label>
			</checkbox-group>
			<text class="totalprice">合计：{{cprice}}</text>
			<view @click="onorder" class="btn1">
				<text>结算</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import $http from '../../request/index.js'
	import {
		ref,
		computed
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	import {
		showSuccessToast,
		showFailToast
	} from 'vant';
	const store = useStore()
	let carts = ref([])
	let all = ref(false)
	let one = ref([])
	let cprice = ref('')
	let cnum = ref('')

	function onorder() { //路由到订单页面
		// 点击结算时，勾选的商品数据
		let order = {
			pri: cprice.value,
			num: cnum.value,
			goods: []
		}
		order.goods = carts.value.filter(item => one.value.includes(item.carId))
		console.log(order)
		store.commit('updateOrder', order)
		if (!order.goods.length) {
			return
		}
		uni.navigateTo({
			url: '/pages/goodsettle/goodsettle'
		})
	}

	function onchangeone(e) { //单选控制全选
		// e.detail.value拿到的是装了所有选中的单选的value值
		// detail = {value:[选中的checkbox的value的数组]}
		let vals = e.detail.value
		one.value = vals //更新one数组
		all.value = vals.length == carts.value.length //更新this.all的值
		total()
	}

	function onchangeall(e) { //全选控制单选
		let vals = e.detail.value
		if (vals.length) { //如果全选被选中
			one.value = carts.value.map(item => item.carId) //one里面装满商品id
			all.value = true //更新this.all的值
		} else { //如果全选没有选中
			one.value = [] //清空one
			all.value = false //更新this.all的值
		}
		total()
	}

	function total() { //计算总价、总数
		let p = 0,
			n = 0;
		let sel = carts.value.filter(item => one.value.includes(item.carId))
		console.log(sel)
		sel.forEach(item => {
			n += item.carCount
			p += item.productPrice * item.carCount
		})
		cnum.value = n
		cprice.value = p
	}

	function updateNum(type, id) { //数量加减，type为1或者-1，id为商品id
		console.log('555555', type, id)
		console.log({
			'carCount': type,
			'carId': id
		})
		$http.post('/car/updateCount', {
			"carCount": type * 1,
			"carId": id * 1
		}).then(res => {
			console.log(res)
			let {
				code,
				msg
			} = res
			if (!code) {
				carts.value.map(item => {
					if (item.carId == id) {
						item.num = res.data.num
						return item
					}
					return item
				})
				showSuccessToast(msg)
			}
		})
	}

	function cancel(id) { //点击删除
		$http.get(`/car/del/${id}`).then(res => {
			console.log(res)
			let {
				code,
				msg
			} = res
			if (!code) { //如果删除成功
				let data = carts.value.filter(i => i.carId != id)
				carts.value = data
			}
		})
	}
	onShow(() => {
		all.value = false
		one.value = []
		carts.value = []
		$http.get('/car/all').then(res => {
			console.log(res)
			let {
				code,
				data
			} = res
			carts.value = data
		})
	})
	// 刚进来读取vuex里面的登录状态，如果没有登录，就弹框提示并跳转到登录页面
	onLoad(() => {
		let login = computed(() => store.state.login)
		if (!login.value) { //如果登录状态为未登录，跳转到登录页面
			uni.showModal({
				content: '尚未登录，是否立即登录？',
				confirmText: '立即登录',
				success: res => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		}
	})
</script>

<style scoped>
	.all {
		width: 150rpx;
	}

	.totalprice {
		width: 300rpx;
	}

	.length1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.length {
		width: 500rpx;
		height: 200rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.btn1 {
		width: 180rpx;
		height: 70rpx;
		background-color: #Fe9b23;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
	}

	.btn1 text {
		color: #ffffff;
	}

	.tool {
		width: 100%;
		height: 50px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 50px;
		left: 0;
	}

	.cart-page {
		width: 100%;
		height: calc(100vh - 94px);
		overflow-y: scroll;
		padding: 20rpx 20rpx 100rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;
	}

	.name {
		width: 100%;
		font-size: 28rpx;
	}

	.card {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		height: 200rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card>image {
		width: 160rpx;
		height: 160rpx;
	}

	checkbox {
		transform: scale(0.7);
	}

	button {
		transform: scale(0.5);
		font-size: 40rpx;
	}
</style>